<template>
    <div>
        <div class="quanping">
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="mohu">
                        <el-breadcrumb separator-class="el-icon-arrow-right" class="suozai">
                            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>物业服务</el-breadcrumb-item>
                            <el-breadcrumb-item>访客管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <div class="fangke">
                            访客记录
                        </div>
                        <el-divider></el-divider>
                        <div class="cha">
                            <el-row type="flex" justify="center">
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="8" class="kuang">
                                            访问状态 
                                            <el-select v-model="state" placeholder="请选择访问状态" size="mini" clearable class="xm">
                                                <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col :span="8" class="kuang">
                                            访客姓名
                                            <el-input v-model="visitor" placeholder="请输入内容" class="xm" size="mini" clearable></el-input>
                                        </el-col>
                                        <el-col :span="6" class="kuang">
                                            <el-button type="primary" size="mini">查询</el-button>
                                            <el-button size="mini">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="zhuye">
                        <el-row type="flex" justify="center">
                            <el-col :span="22">
                                <div class="piliang">
                                    <span style="float:left;">访客列表</span>
                                    <el-button size="mini" style="float:right;margin-top: 15px;">批量操作</el-button>
                                </div>
                                <el-card>
                                    <el-table :data="visitData" border element-loading-text="数据加载中" @selection-change="handleSelectionChange" highlight-current-row fit v-loading="listLoading">
                                        <el-table-column type="selection" width="45"></el-table-column>
                                        <el-table-column align="center" label="访问房屋" prop="visitTheHouse" width="100"/>
                                        <el-table-column label="访客姓名" prop="visitor" width="148"/>
                                        <el-table-column label="状态" width="80">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.state === '0'">待生效</span>
                                                <span v-if="scope.row.state === '1'">生效中</span>
                                                <span v-if="scope.row.state === '2'">已失效</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="性别" prop="sex" width="80"/>
                                        <el-table-column label="手机号" prop="phone" width="120"/>
                                        <el-table-column label="访问日期" prop="visitDate" width="120"/>
                                        <el-table-column label="访问时长" prop="visitDuration" width="100"/>
                                        <el-table-column align="center" label="操作" width="180">
                                        <template slot-scope="scope">
                                            <el-button type="warning" size="mini" @click="studentFromEditView(scope.row)">查看详情<i class="el-icon-edit"></i></el-button>
                                        </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 分页组件 -->
                                    <div class='block'>
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="currentPage4"
                                            :page-sizes="[5, 10, 15, 20]"
                                            :page-size="page.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="page.total">
                                        </el-pagination>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
	data () {
        return{
            visitData:[],
            visitor: '',
            listLoading: true, // 是否显示loading信息
            // 分页对象
			page: {
				// 每页条数
				pageSize: 10,
				// 分页页数
				pageNum: 1,
				// 分页总条数
				total: 0
			},
            options: [{
            value: '0',
            label: '全部'
            }, {
            value: '1',
            label: '待生效'
            }, {
            value: '2',
            label: '生效中'
            }, {
            value: '3',
            label: '已失效'
            }],
            state: '',
            currentPage4: 1,
            loading: false,//上传的loading
            listLoading: true, // 是否显示loading信息
        }
    },
    mounted () {
		this.getVisitList()
	},
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getVisitList()
		},
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getVisitList()
		},
        // 获取访客记录列表信息
        getVisitList () {
            this.$axios.get('/memberZx/visit/getVisitList',{params: {
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
                    visitor: this.visitor,
					state: this.state,
                    vid: window.sessionStorage.getItem("vid")
				}
            }).then(res => {
                if (res.data != null) {
                    this.visitData = res.data.obj.content
                    this.page.total = res.data.obj.total
                    this.listLoading = false
                }
            })
        },
        message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
    }
}
</script>
<style lang="css" scoped>
.quanping{
    width:100%;
    height:920px;
    background-color:#F0F2F5;
}
.mohu{
    margin-top: 40px;
    width:100%;
    height:200px;
    background-color:white;
}
.zhuye{
    margin-top: 40px;
    width:100%;
    height:620px;
    background-color:white;
}
.suozai{
    padding-top: 10px;
    padding-left: 20px;
    font-size: 14px;
}
.fangke{
    padding-top: 20px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
}
.cha{
    width: 100%;
    height: 50px;
    font-size: 14px;
}
.kuang{
    height: 50px;
    line-height: 50px;
}
.xm{
    width: 200px;
}
.piliang{
    margin-top: 10px;
    width: 100%;
    height: 50px;
}
</style>